<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix ">
        <el-button
          type="danger"
          @click="deBounceWrap(handleDeleteAll)"
          class="float-left"
        >
          批量删除
        </el-button>
        <el-form
          :inline="true"
          :model="listQuery"
          class="demo-form-inline float-right"
        >
          <el-form-item label="">
            <el-cascader
              v-model="listQuery.menuList"
              :options="menuList"
              :props="{ label: 'menu_name', value: 'menu_id' }"
              clearable
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="">
            <el-input
              type="text"
              v-model.trim="listQuery.name"
              placeholder="请输入权限名称"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="deBounceWrap(getList)"
              >查询</el-button
            >
            <el-button type="primary" @click="deBounceWrap(handleResetSubmit)"
              >重置</el-button
            >
            <el-button type="primary" @click="deBounceWrap(getList)"
              >刷新</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <el-table
        :data="tableData"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="name"
          label="权限名称"
          width="200"
        ></el-table-column>
        <el-table-column prop="routes" label="包含的路由">
          <template slot-scope="scope">
            <div class="flex flex-col">
              <div
                class="mb-2"
                v-for="(item, index) in scope.row.routes"
                :key="index"
              >
                {{ item.uri }}:{{ item.method }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="menu_name"
          width="180"
          label="所属的二级菜单"
        ></el-table-column>
        <el-table-column
          prop="created_at"
          width="180"
          label="添加时间"
        ></el-table-column>
        <el-table-column
          prop="admin_name"
          width="140"
          label="操作人"
        ></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              size="mini"
              icon="el-icon-edit"
              @click="deBounceWrap(handleEdit, scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              plain
              size="mini"
              icon="el-icon-delete"
              @click="deBounceWrap(handleDel, scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <cus-pagination
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.page_size"
        @pagination="getList"
      />
    </el-card>

    <!-- 删除弹框 -->
    <el-dialog
      title="确定删除吗?"
      :visible.sync="deleteDialogVisible"
      width="435px"
    >
      <span
        ><em style="font-style: normal; color: red">删除后不可恢复</em
        >，你还要继续吗？</span
      >
      <div slot="footer" class="dialog-footer flex">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmDelete">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  accessList,
  allMenuList,
  delAccess
} from "@/api/routingList/routingList";

export default {
  data() {
    return {
      zmValue: "A",
      //表单数据
      tableData: [],
      menuList: [],
      listQuery: {
        menuList: [],
        name: undefined, //权限名称
        menu: undefined, //菜单名称
        page: 1,
        page_size: 10
      },
      total: 0,
      // 勾选内容
      multipleSelection: [],
      // 要删除的内容的ids
      dataIds: "",
      //删除
      deleteDialogVisible: false,
      currentId: ""
    };
  },
  created() {
    this.getList();
    this.getMenuList();
  },
  methods: {
    //获取列表
    async getList() {
      const { data } = await accessList({
        access_name: this.listQuery.name,
        page: this.listQuery.page,
        page_size: this.listQuery.page_size,
        menu_id:
          this.listQuery.menuList[this.listQuery.menuList.length - 1] || -1
      });
      this.tableData = data.data;
      this.total = data.total;
    },
    async getMenuList() {
      const { data } = await allMenuList();
      this.menuList = data;
    },
    //重置
    handleResetSubmit() {
      this.listQuery.name = null;
      this.listQuery.menuList = [];
      this.getList();
    },
    // 勾选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 点击批量删除
    handleDeleteAll() {
      if (this.multipleSelection.length) {
        /* 存在勾选数据 */ const Routeids = this.multipleSelection.reduce(
          (pre, currRow) => {
            pre += `${currRow.id},`;
            return pre;
          },
          ""
        );
        const ids = Routeids.substring(0, Routeids.length - 1);
        delAccess({ ids })
          .then(() => this.$message.success("删除成功！"))
          .catch(console.error)
          .finally(() => /* 刷新数据 */ {
            this.multipleSelection = [];
            this.getList();
          });
      } /* 不存在勾选数据 */ else {
        this.$message.warning("请勾选要删除的数据！");
      }
    },
    //编辑
    handleEdit(row) {
      window["localStorage"].setItem("row", JSON.stringify(row));
      this.$router.push({
        path: "/config/editModal",
        query: { status: "edit" }
      });
    },
    // 删除
    handleDel(row) {
      console.log(row);
      this.dataIds = { ids: `${row.id}` };
      this.deleteDialogVisible = true;
    },
    // 确定删除
    confirmDelete() {
      delAccess(this.dataIds).then(response => {
        if (response.code === 200) {
          this.getList();
          this.deleteDialogVisible = false;
          this.$notify({
            type: "success",
            message: "操作成功"
          });
        }
      });
    }
  }
};
</script>
<style scoped>
.btnLayout {
  transform: translateY(40px);
  margin-bottom: 40px;
}
</style>
